

<template>
  <div class="container">
    <div class="search-div">
      <el-row>
        <el-col span="6">
          <el-input placeholder="请输入专业名称" clearable v-model="searchParam.name"></el-input>
        </el-col>
        <el-col span="3">
          <el-button style="background-color: #ff5600; color: #ffffff; width: 80%" @click="queryData"> 搜索 </el-button>
        </el-col>
      </el-row>
      <div style="margin: 20px 0;">
        <el-row>
          <el-col span="2">
            <el-button type="text" style="color: black" size="mini">专业层次 ></el-button>
          </el-col>
          <el-col span="15">
            <el-row>
              <el-col v-for="i in majorLevelArr" :key="i" span="2">
                <el-button size="mini" type="text" :class="{ majorLevel, active: majorLevel === i }" @click="setMajorLevel(i)">{{i}}</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <el-divider></el-divider>
      <div style="padding: 0 40px">
        <el-card class="box-card" v-for="item in dataList" :key="item.id">
          <div style="padding: 10px; height: 80px">
            <el-row>
              <el-col span="4">
                <el-avatar :size="80" src="https://empty" @error="errorHandler">
                  <img v-if="item.schoolData" :src="item.schoolData.icon"/>
                </el-avatar>
              </el-col>
              <el-col span="20">
                <el-row style="height: 30px; line-height: 30px">
                  <el-col span="15">
                    <div style="font-size: large"><font color="#00bfff">{{ item.professorName }}</font>  -  <font color="#ff4500">{{item.collegeName}}</font></div>
                  </el-col>
                  <el-col span="5">
                    <el-tag type="info"  v-if="item.schoolData">{{item.schoolData.address}}</el-tag>
                  </el-col>
                  <el-col span="2">
                    <el-tag type="primary" v-if="item.schoolData">
                      <el-link   type="primary" :underline="false" style="font-size: 12px" :href="item.schoolData.website" target="_blank">学校官网</el-link>
                    </el-tag>
                  </el-col>
                  <el-col span="2">
                    <el-tag type="primary" v-if="!item.schoolData">暂无更多信息</el-tag>
                  </el-col>
                </el-row>
                <el-row style="height: 30px; line-height: 30px; font-size: large;">
                  <div style="padding: 20px 0 0 0">
                    <span>{{item.level}}</span>
                    <el-divider direction="vertical"></el-divider>
                    <span  v-if="item.schoolData">{{item.schoolData.type}}</span>
                    <el-divider direction="vertical"></el-divider>
                    <span  v-if="item.schoolData">{{item.schoolData.attr || ''}}</span>
                    <el-divider v-if="item.schoolData" direction="vertical"></el-divider>
                    <span>强基计划</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>上年录取分数 {{item.lowerScore}}</span>
                  </div>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>
      <div style="margin: 10px">
        <el-pagination
            background
            :current-page.sync="pageParam.page"
            @current-change="changePage"
            layout="prev, pager, next"
            :total="pageParam.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script >
import {searchMajor} from "@/api/request";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Index',
  computed: {

  },
  data() {
    return {
      majorLevel: '本科',
      majorLevelArr: [
        "本科", "专科"
      ],
      pageParam: {
        page: 1,
        size: 10,
        total: 0,
      },

      searchParam: {
        name: '',
        level: '本科',
      },

      dataList: []
    }
  },

  methods: {
    setMajorLevel(yx) {
      this.majorLevel = yx
      this.searchParam.level = yx
      this.queryData()
    },

    queryData(){
      searchMajor(this.pageParam, this.searchParam).then(res => {
        console.log(res)
        this.dataList = res.data.records
        this.pageParam.total = res.data.total
        for (let i = 0; i < this.dataList.length; i++) {
          const items = this.dataList[i]
          if (items.schoolData) {
            items.schoolData.icon = "http://localhost:8085/upload/" + encodeURIComponent(items.schoolData.icon)
          }
        }
      })
    },

    changePage(index) {
      this.pageParam.page = index
      this.queryData()
    }

  },

  mounted() {
    this.queryData()
  }
}
</script>

<style scoped>
.majorLevel {
  color: black;
}

.active {
  color: #ff5600;
}
</style>